/* eslint-disable @typescript-eslint/no-unused-vars */
import {
  addPermissionsAPI,
  delManyPermissionsByIdsAPI,
  delPermissionsByIdAPI,
  loadPermissionsByIdAPI,
  loadPermissionsInfoAPI,
  modifyPermissionsInfoByIdAPI,
} from '@/services/managerManagement/permission';
import { DeleteOutlined, EditOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProForm,
  ProFormText,
  ProFormTextArea,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Popconfirm, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';

function Permission() {
  const [isShow, setIsShow] = useState<any>(false);

  const actionRef = useRef<ActionType>();

  const [currentId, setCurrentId] = useState('');

  const [myModalForm] = ProForm.useForm();

  const [selRowArr, setSelRowArr] = useState<any>([]);

  useEffect(() => {
    if (!isShow) {
      setCurrentId('');
    }
  }, [isShow]);

  const columns: ProColumns[] = [
    {
      title: '序号',
      width: 80,
      align: 'center',
      hideInSearch: true,
      render(a: any, b: any, index: number) {
        return index + 1;
      },
    },
    {
      title: '名字',
      width: 100,
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '简介',
      width: 200,
      align: 'center',
      ellipsis: true,
      copyable: true,
      dataIndex: 'desc',
      hideInSearch: true,
    },
    {
      title: '操作',
      align: 'center',
      fixed: 'right',
      hideInSearch: true,
      render(c, v: any) {
        return (
          <Space>
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={async () => {
                console.log(v);

                const res = await loadPermissionsByIdAPI(v.id);
                console.log(res);

                myModalForm.setFieldsValue(res.data.list);
                setCurrentId(res.data.id);
                setIsShow(true);
              }}
            />
            <Popconfirm
              title="确认删除？"
              onConfirm={async () => {
                await delPermissionsByIdAPI(v.id);
                actionRef.current?.reload();
              }}
            >
              <Button type="primary" danger icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        request={loadPermissionsInfoAPI}
        bordered
        rowKey="id"
        rowSelection={{
          selectedRowKeys: selRowArr,
          onChange(selectedRowKeys, selectedRows, info) {
            setSelRowArr(selectedRowKeys);
          },
        }}
        toolBarRender={() => {
          const tools = [
            <Button key="1" type="primary" onClick={() => setIsShow(true)}>
              <PlusOutlined />
              新建
            </Button>,
          ];
          if (selRowArr.length > 1) {
            tools.push(
              <Button
                key="2"
                danger
                type="primary"
                onClick={async () => {
                  await delManyPermissionsByIdsAPI(selRowArr.join(','));
                  setSelRowArr([]);
                  actionRef.current?.reload();
                }}
              >
                <MinusOutlined />
                批量删除
              </Button>,
            );
          }
          return tools;
        }}
        actionRef={actionRef}
      />
      <ModalForm
        form={myModalForm}
        open={isShow}
        onOpenChange={setIsShow}
        modalProps={{ destroyOnClose: true, maskClosable: false }}
        onFinish={async (v: any) => {
          console.log(v);

          if (currentId) {
            console.log(currentId);

            await modifyPermissionsInfoByIdAPI(currentId, v);
          } else {
            await addPermissionsAPI(v);
          }

          actionRef.current?.reload();
          setIsShow(false);
        }}
      >
        <ProFormText
          label="名字"
          name="name"
          placeholder="请输入名字"
          rules={[{ required: true, message: '必填字段' }]}
        />
        <ProFormTextArea label="简介" name="desc" placeholder="请输入简介"></ProFormTextArea>
      </ModalForm>
    </PageContainer>
  );
}

export default Permission;
